<template>
  <ul id="anchor-root">
    <template v-for="(item, index) in List">
      <li
        :key="item.Level + '-' + item.Index"
        :class="[Active_index == item.Index ? 'active' : '', 'anchor-item']"
        :name="item.Tag"
      >
        <!-- <span class="serial-no">{{item.Level}}</span> -->
        <a
          @click="jump(item)"
          :key="item.Level + '-' + item.Index"
          :title="item.name"
          :class="`anim-trans level-${item.Level}`"
          >{{ item.Text }}</a
        >
      </li>
      <ol
        v-if="item.Children && item.Children.length > 0"
        class="children-item"
        :key="index"
      >
        <!-- <q-slide-transition :duration="500">
          <directory-item
            v-show="item.Expand"
            :List="item.Children"
            :Active_index="Active_index"
          ></directory-item
        ></q-slide-transition> -->
        <slide-up-down :active="item.Expand" :duration="500">
          <directory-item :List="item.Children" :Active_index="Active_index" />
        </slide-up-down>
      </ol>
    </template>
  </ul>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
import { treeNode } from 'src/models/treeNode';
import { bus } from './recusion-bus';
declare var $: any;
@Component<directoryItem>({
  mounted() {},
  components: {},
  methods: {
    jump(n) {
      // this.$emit("jump", n);
      bus.$emit('jump', n);
    }
  }
})
export default class directoryItem extends Vue {
  @Prop({ type: Array, required: false }) readonly List!: Array<treeNode>;

  @Prop({ type: Number, required: false }) readonly Active_index!: Number;

  private active_index: Number = -1;

  private directory_model: any = [];

  // @Emit()
  // public jump(id: number): void {}
}
</script>
<style lang="scss" scoped>
#article-menu {
  &:hover {
    overflow-y: auto;
  }
  .children-item {
    margin: 0 0 0.8em;
  }

  .anchor-item {
    cursor: pointer;
    a {
      color: var(--text-light);
      display: block;
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: 0.5s;
      font-size: 1rem;
      @for $i from 1 through 6 {
        &.level-#{$i} {
          font-size: (1- (0.1 * $i)) * 1rem;
        }
      }
    }

    &:hover {
      a {
        color: red;
      }
    }
    &.active {
      a {
        color: #ff5370;
        font-weight: bold;
      }

      &::before {
        content: '';
        width: 12px;
        height: 12px;
        border-radius: 100%;
        position: absolute;
        left: -18px;
        background: #eb5055;
        top: 50%;
        transform: translate(0, -50%);
      }
    }
  }
  ul {
    margin: 10px;
    border-left: 3px #eee solid;
    padding-left: 10px;
    position: relative;
    > li {
      list-style: none;
      padding: 5px 0;
      position: relative;
    }
  }
  > ul {
    // border-left: none;
    > li {
      font-size: 15px;
    }
  }
}
</style>
